<template>
  <div class="afterInvestDel-page app-container">
    <div class="head">
      <div class="chunk title">
        <div class="product">
          <h3>{{info.investName}}</h3>
          <p class="tips">
            <!-- <span class="tip">价值型</span> -->
          </p>
        </div>
        <div style="font-size: 13px;" class="info">
          <div style="padding-left: 30%;">
            <div class="fromLine">
              <div class="label">投资形式：</div>
              <div class="fromLine-content">{{info.investTypeText}}</div>
            </div>
            <div class="fromLine">
              <div class="label">投资顾问：</div>
              <div class="fromLine-content">{{info.investAdviser}}</div>
            </div>
            <div class="fromLine">
              <div class="label">投资时间：</div>
              <div class="fromLine-content">{{info.investTime | parseTime}}</div>
            </div>
          </div>
        </div>
        <div style="font-size: 13px;" class="info2">
          <div style="padding-left: 30%;">
            <div class="fromLine">
              <div class="label">所属分组：</div>
              <div class="fromLine-content">{{info.groupName}}</div>
            </div>
            <div class="fromLine">
              <div class="label">对标指数：</div>
              <div class="fromLine-content">{{contrastOptions_obj[info.investIndex]}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="chunk data">
        <div class="netWorth">
          <div class="netWorth1">
            <p class="num">{{info.latestNetWorth}}</p>
            <p class="unit">单位净值（{{info.latestNetWorthTime | parseTime}}）</p>
          </div>
          <div class="netWorth2">
            <div class="fromLine">
              <div class="label">累计净值：</div>
              <!-- <div class="fromLine-content"><span style="color: #F00;">*</span> 0.8833</div> -->
              <div class="fromLine-content">{{info.latestNetWorth}}</div>
            </div>
            <div class="fromLine">
              <div class="label">复权净值： </div>
              <div class="fromLine-content">{{info.latestNetWorth}}</div>
            </div>
          </div>
        </div>
        <div class="profit">
          <div>收益率</div>
          <div>
            <span v-if="info.investNetWorthExtends" :class="info.investNetWorthExtends[2].incomeRate>0?'positiveFc':'negativeFc'">{{info.investNetWorthExtends[2].incomeRate | toFixed2}}%</span>
            <span v-if="info.investNetWorthExtends" :class="info.investNetWorthExtends[0].incomeRate>0?'positiveFc':'negativeFc'">{{info.investNetWorthExtends[0].incomeRate | toFixed2}}%</span>
            <span v-if="info.investNetWorthExtends" :class="info.investNetWorthExtends[5].incomeRate>0?'positiveFc':'negativeFc'">{{info.investNetWorthExtends[5].incomeRate | toFixed2}}%</span>
          </div>
          <div>
            <span>近3月</span>
            <span>今年以来</span>
            <span>近1年</span>
          </div>
        </div>
        <div class="history">
          <div>成立以来</div>
          <div>
            <span v-if="info.investNetWorthExtends" style="font-size: 16px">{{info.investNetWorthExtends[7].maxDownRate | toFixed2}}%</span>
            <span v-if="info.investNetWorthExtends" style="font-size: 16px">{{info.investNetWorthExtends[7].sharpeRate | toFixed2}}</span>
          </div>
          <div>
            <span>最大回撤</span>
            <span>夏普比率</span>
          </div>
        </div>
        <div class="other">
          <div style="width: 50%;">
            <div class="fromLine">
              <div class="label">成立日期：</div>
              <div class="fromLine-content">{{info.investTime | parseTime}}</div>
            </div>
            <div class="fromLine">
              <div class="label"></div>
              <div class="fromLine-content"></div>
            </div>
          </div>
          <div style="width: 50%;"></div>
        </div>
      </div>
      <div class="chunk operation from-alignCenter">
          <el-form ref="dataFrom" :inline="true" label-width="82px" :model="dataFrom">
            <el-form-item label="对比指标：" prop="types">
              <indexSelectTree :indexType.sync="dataFrom.types" @contrastOptionsObj="contrastOptionsObj"></indexSelectTree>
            </el-form-item>
            <el-form-item style="margin-left: 20px">
              <el-button type="primary" @click="saveParamsHandle">应用</el-button>
              <el-button @click="refresh">重置</el-button>
            </el-form-item>
          </el-form>
      </div>

      <!-- 悬浮头部 -->
      <div v-show="scrollCard" class="scrollCard from-alignCenter">
        <el-form ref="dataFrom" :inline="true" label-width="82px" :model="dataFrom">
          <el-form-item label="对比指标：" prop="types">
            <indexSelectTree :indexType.sync="dataFrom.types" @contrastOptionsObj="contrastOptionsObj"></indexSelectTree>
          </el-form-item>
          <el-form-item style="margin-left: 20px">
            <el-button type="primary" @click="saveParamsHandle">保存应用</el-button>
            <el-button @click="refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="nav">
      <div class="nav-item" :class="{'active': active==1}" @click="curNavHandle(1)">投资净值分析</div>
      <div v-if="status==3" class="nav-item" :class="{'active': active==2}" @click="curNavHandle(2)">子投资净值分析</div>
    </div>
    <div v-if="active==1" class="content">
      <chunk1 ref="chunk1" v-if="id_index.length&&Object.keys(contrastOptions_obj).length" :status="status" :info="info" :types="id_index" :start_date="start_date" :contrastOptions_obj="contrastOptions_obj" :investName="info.investName"></chunk1>
    </div>
    <div v-if="active==2" class="content">
      <chunk2 ref="chunk2" v-if="id_index.length&&Object.keys(contrastOptions_obj).length" :info="info" :listLoading1="listLoading1" :list1="list1" :contrastOptions_obj="contrastOptions_obj" :id_index="id_index"></chunk2>
    </div>
  </div>
</template>

<script>
import { getInvestHeadDetial, getInvestManageHeadDetial } from '@/api/afterInvest'
import chunk1 from './chunk1.vue'
import chunk2 from './chunk2.vue'
import indexSelectTree from '@/components/investComn/indexSelectTree.vue'
import { parseTime } from '@/utils'

export default {
  name: 'AfterInvestDel',
  components: { indexSelectTree, chunk1, chunk2 },
  data() {
    return {
      active: 1,
      listLoading1: false,
      list1: [],
      contrastOptions_obj: {},

      dataFrom: {
        types: []
      },
      investId: '',
      status: undefined,
      info: {},
      id_index: [],
      start_date: '',

      scrollCard: false,
    }
  },
  watch: {
    'dataFrom.types': {
      handler(newVal, oldVal) {
        if(newVal.length > 4) {
          this.$message({
            message: '最多选择4个对比指标',
            type: 'warning',
            duration: 2000
          })
          this.$nextTick(() => {
            this.dataFrom.types = oldVal
          })
        }
      },
      deep: true
    },
  },
  created() {
    this.investId = this.$route.query.id
    this.status = this.$route.query.status
    this.getInvestHeadDetial(this.investId)
    this.getInvestManageHeadDetial(this.investId)

    window.addEventListener('scroll', this.watchScroll)
  },
  methods: {
    watchScroll() {
      if(document.documentElement.scrollTop >= 318) {
        this.scrollCard = true
      }else {
        this.scrollCard = false
      }
    },
    contrastOptionsObj(obj) {
      this.contrastOptions_obj = obj
    },
    curNavHandle(i) {
      this.active = i
    },
    saveParamsHandle() {
      this.id_index = this.dataFrom.types
      this.$nextTick(() => {
        if(this.active==2) this.$refs.chunk2.saveParamsHandle()
      })
    },
    refresh() {
      this.$refs['dataFrom'].resetFields()
    },
    getInvestHeadDetial(investId) {
      this.listLoading1 = true
      getInvestHeadDetial({
        investId
      }).then(res => {
        this.listLoading1 = false
        console.log('详情  getInvestHeadDetial', res)

        this.list1 = res.body[0].detials
        this.$nextTick(() => {
          this.dataFrom.types = res.body[0].investIndex
          this.id_index = [this.dataFrom.types]
        })
      })
    },
    getInvestManageHeadDetial(investId) {
      getInvestManageHeadDetial({
        investId
      }).then(res => {
        this.info = res.body
        this.start_date = parseTime(Math.min.apply(Math, res.body.detials.map(item => { return new Date(item.investStarttime) })))
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.afterInvestDel-page {
  position: relative;
  .head {
    padding: 15px 15px 0;
    border: 1px solid #e1e0e0;
    font-size: 14px;
    .redFont { color: #c00; }
    .fromLine {
      display: flex;
      line-height: 24px;
      .label { width: 80px; text-align: right; }
      // .fromLine-content {}
    }
    .chunk {
      display: flex;
      > div:nth-of-type(1) { width: 28%; }
      > div:nth-of-type(2) { width: 22%; }
      > div:nth-of-type(3) { width: 22%; }
      > div:nth-of-type(4) { width: 28%; }
      .chunk-strategyType {
        width: 100% !important; height: 100%;
        display: flex;
        > div { flex: 1; }
        > div + div {
          border-left: 1px dashed #e1e0e0;
          margin-left: 20px;
        }
        .netWorth-strategyType {
          justify-content: space-around;
        }
      }
      .history-strategyType {
        div {
          display: flex;align-items: center;
          .label {
            justify-content: flex-end;
          }
        }
        & + .history-strategyType {
          margin-left: 20px;
        }
      }
    }
    .chunk + .chunk { border-top: 1px dashed #e1e0e0; }
    .title {
      height: 84px;
      .product {
        h3 {font-size: 22px;}
        .tips {
          margin-top: 30px;
          .tip {
            border: 1px solid #3D71AE;
            color: #3D71AE;
            padding: 3px 6px;
            & + .tip { margin-left: 6px; }
          }
        }
      }
    }
    .title-center { line-height: 35px; }
    .data {
      height: 114px;
      padding: 10px 0;
      > div + div {
        border-left: 1px dashed #e1e0e0;
        margin-left: 20px;
      }
      .netWorth {
        display: flex;
        justify-content: space-between;
        .label { width: 100px; text-align: right; }
        .netWorth1 {
          display: flex; flex-direction: column; justify-content: center; align-items: center;
          .num { font-size: 32px; line-height: 38px; color: #c00; }
        }
        .netWorth2 { display: flex; flex-direction: column; justify-content: center; align-items: center; div { line-height: 36px; } }
      }
      .profit, .history {
        > div {line-height: 32px;}
        > div {
          display: flex; justify-content: space-around;
          span {width: 33.33%;text-align: center;}
        }
      }
      .other {
        display: flex;
        > div {display: flex; flex-direction: column; justify-content: space-around;}
      }
    }
    .operation {
      height: 80px;
      display: flex;
      align-items: center;
    }
  }
  .scrollCard {
    width: calc(100% - #{$sideBarWidth} - 80px);
    height: 80px;
    font-size: 14px;
    background: #FFF;
    z-index: 668;
    border: 1px solid #e1e0e0;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    padding-left: 15px;
    margin-left: -16px;
  }
  .from-alignCenter {
    ::v-deep .el-form{
      .el-form-item { margin-bottom: 0; }
    }
  }
  .nav {
    height: 40px;
    margin-top: 20px;
    background-color: #f2f2f2;
    border: 1px solid #e1e0e0;
    display: flex;
    .nav-item { font-size: 12px; }
    div {
      width: 120px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      border-right: 1px solid #e1e0e0;
    }
    .active {
      line-height: 37px;
      background-color: #FFF;
      border-top: 2px solid rgb(79, 149, 221);
    }
  }
}
</style>

